<template>
  <div style="padding: 16px">
    实时概况&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更新时间：{{}}

    <div class="Real-time-overview">
      <div class="Number-of-visitors">
        <p style="font-size: 10px">访客数</p>
        <p style="font-size: 26px; font-weight:700">38563</p>
        <p style="font-size: 10px">较昨日：</p>
      </div>
      <div
        class="Number-of-visitors"
        style="
          background-image: linear-gradient(
            to right,
            rgb(21, 151, 49),
            rgb(183, 241, 101)
          );
        "
      >
        <p style="font-size: 10px">访客数</p>
        <p style="font-size: 26px; font-weight:700">27847</p>
        <p style="font-size: 10px">较昨日：</p>
      </div>
      <div
        class="Number-of-visitors"
        style="
          background-image: linear-gradient(
            to right,
            rgb(229, 191, 22),
            rgb(201, 218, 72)
          );
        "
      >
        <p style="font-size: 10px">访客数</p>
        <p style="font-size: 26px; font-weight:700">43141</p>
        <p style="font-size: 10px">较昨日：</p>
      </div>
      <div
        class="Number-of-visitors"
        style="
          background-image: linear-gradient(
            to right,
            rgb(90, 36, 238),
            rgb(138, 52, 225)
          );
        "
      >
        <p style="font-size: 10px">访客数</p>
        <p style="font-size: 26px; font-weight:700">3980</p>
        <p style="font-size: 10px">较昨日：</p>
      </div>
    </div>
  </div>
  <div>
    <div id="main"></div>
  </div>
  <!-- <div class="salesVolume">
    <div class="curriculum">
      <p>销售量TOP5课程</p>
      <el-table :data="tableData" style="width: 400px">
        <el-table-column prop="date" label="排名" width="180" />
        <el-table-column prop="name" label="课程信息" width="180" />
        <el-table-column prop="name" label="访问量" width="180" />
        <el-table-column prop="name" label="支付量" width="180" />
        <el-table-column prop="name" label="支付转化率" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div class="curriculum">
      <p>销售量TOP5课程</p>
      <el-table :data="tableData" style="width: 400px">
        <el-table-column prop="date" label="排名" width="40" />
        <el-table-column prop="name" label="课程信息" width="40" />
        <el-table-column prop="name" label="访问量" width="40" />
        <el-table-column prop="name" label="支付量" width="40" />
        <el-table-column prop="name" label="支付转化率" width="40" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div> -->
</template>
<script setup>
import * as echarts from "echarts";

onMounted(() => {
  var myChart = echarts.init(document.getElementById("main"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      type: "category",
      data: ["00", "01", "02", "03", "04", "05", "06","07","08","09","10","11","12"],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320,119,567,107,999,444,111],
       
        type: "line",
        smooth: true,
      },
      {
         data: [120, 432, 221, 384, 1290, 630, 320,111,222,666,44,333,666],
        type: "line",
        smooth: true,
      },
    ],
  });
});
</script>

<style scoped>
#main {
  width: 100%;
  height: 600px;
}
.Real-time-overview {
  display: flex;
  justify-content: space-between;
}
.Number-of-visitors {
  width: 230px;
  height: 130px;
  color: white;
  background-image: linear-gradient(
    to right,
    rgb(16, 51, 224),
    rgb(101, 143, 241)
  );
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-evenly;
  margin-top: 30px;
}
.Number-of-visitors p {
  margin-left: 30px;
}
.curriculum{
  border-radius: 10px;
  background-color: rgb(212, 208, 208);
}
.salesVolume{
  width: 100%;
  display: flex;
  justify-content: space-evenly; 
}
</style>